<template>
	<h2>设计趋势系列内容</h2>
	<div class="main">
		系列名字：<input type="text" v-model="seriesname" placeholder="请输入系列名字"><br><br>
		<span>/*一次最多上传7张图片*/</span><br><br>
		<input type="file" ref="imageInput" id='fileload' multiple accept="image/*" @change="showimg">
		<div class="imgbox">
			<div v-for = '(el,index) in imageFiles' :key="index">
				<img :src="el.url" alt="">
			</div>
		</div>
		<el-button class="btn" @click='uploadData' type="primary">上传</el-button>
	</div>
</template>

<script setup>
	import {getCurrentInstance,ref,reactive,onMounted,onBeforeUpdate} from 'vue'
	let {proxy}=getCurrentInstance()
	// let fileInput = ref(null);
	// let series = ref('')
	// let getimg=(e)=>{
	// 	// 关联到file的点击事件
	// 	fileInput.value.click();
	// }
	
	const imageInput = ref(null);
	const imageFiles = ref([]);
	const seriesname = ref('');
	// const imgName = ref([])

	const showimg = (event) => {
	  const files = event.target.files;
	  if(files.length>=7){
		  alert('最多七张图片')
		  return
	  }
	  // 遍历选中的图片文件
	  for (let i = 0; i < files.length; i++) {
		const file = files[i];
		const url = URL.createObjectURL(file);
		// 将选中的图片文件添加到 imageFiles 数组中
		imageFiles.value.push({ file, url });
	  }
	};
	const uploadData = async () => {
		if(imageFiles.value.length==0 || seriesname.value==''){
			alert('请按要求输入内容')
			return
		}
		const formData = new FormData();

		// 遍历 imageFiles 数组，将所有图片文件追加到 FormData 中
		imageFiles.value.forEach((image, index) => {
			// console.log(image.target,index)
			formData.append(`image_${index}`, image.file);
		});

		// 将其他文字内容追加到 FormData 中
		formData.append('text', seriesname.value);
		try {
			const res = await proxy.$axios.post('/egg/design', formData);
			console.log(res.data);
			// 清空输入值和图片数组
			seriesname.value = '';
			imageFiles.value = [];
			alert(res.data.data)
		} catch (error) {
			console.error(error);
		}
	};
</script>

<style scoped>
	h2 {
		margin-left: 40px;
	}
	.main {
		margin-left: 40px;
	}
	.imgbox {
		width: 900px;
		/* border: 1px solid red; */
		display: flex;
		flex-wrap: wrap;
	}
	.main img {
		width: 100px;
		border: 1px solid gray;
		/* height: 100px; */
	}
	[type="text"] {
		width: 200px;
		height: 30px;
		border-radius: 10px;
		border: 1px solid pink;
		outline: none;
		background-color: pink;
	}
	.main>span {
		color: red;
	}
	.btn {
		margin-top: 10px;
	}
</style>